<template>
  <el-cascader
    change-on-select
    :props="properties"
    :options="areaOptions"
    :value = "localValue"
    @change="handleChange">
  </el-cascader>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            properties: {
                value: 'id',
                label: 'name'
            }
        };
    },
    computed: {
        areaOptions() {
            return this.$store.state.business.area;
        },
        // 查询成本地数组
        localValue() {
            for (let province of this.areaOptions) {
                for (let city of province.children) {
                    if (city.id === this.value) {
                        return [province.id, city.id];
                    }
                }
            }
            return [];
        }
    },
    methods: {
        handleChange(item) {
            this.$emit('input', this.$lodash.last(item));
        }
    }
};
</script>

<style scoped>

</style>
